/**
 * 事件响应
 * 1 编写事件处理函数的不同方法
 * 2 如何从父组件传递事件处理逻辑
 * 3 事件如何传播以及如何停止它们
 *
 * 事件处理函数可以包含副作用吗？
 *  当然可以！事件处理函数是执行副作用的最佳位置。
 */

// 按钮之类的组件通常会包含样式，但不会指定行为。而 PlayButton 和 UploadButton 之类的组件则会向下传递事件处理函数。
export function NormalButton({ onBtnClick, children }) {
  return (
    <button
      onClick={(e) => {
        e.stopPropagation()
        onBtnClick()
      }}
    >
      {children}
    </button>
  )
}

export function AlertButton({ message, children }) {
  return <button onClick={() => alert(message)}>{children}</button>
}

/**
 * onBtnClick 一般以 on开头，
 */
export function PlayButton({ name }) {
  const handlePlayClick = () => {
    alert(`播放${name}`)
  }
  return <NormalButton onBtnClick={handlePlayClick}>{`播放${name}`}</NormalButton>
}
export function UploadButton({ filename }) {
  const handleUploadClick = () => {
    alert(`上传${filename}`)
  }
  return <NormalButton onBtnClick={handleUploadClick}>{`上传${filename}`}</NormalButton>
}

export function Toolbar({ onPlayMovie, onUploadImage }) {
  return (
    <div onClick={() => alert('你点击了toolbar')} style={{ background: 'red' }}>
      <NormalButton onBtnClick={onPlayMovie}>播放复仇者</NormalButton>
      <NormalButton onBtnClick={onUploadImage}>上传图片</NormalButton>
    </div>
  )
}

export function SighUp() {
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault() //不会去刷新页面
        alert('提交表单！')
      }}
    >
      <input />
      <button>确认</button>
    </form>
  )
}
export default function App() {
  function handleClick() {
    alert('hhhh')
  }
  /**
   * 传递给事件处理函数的函数应直接传递，而非调用, 此处和Vue不同
   *    在react渲染过程中，会执行{}的js
   *    因为在vue中，vue template compiler会将template的代码转为render函数，而不是执行
   */
  return (
    <div>
      <button onClick={handleClick}>点击</button>
      <div>
        <AlertButton message={'正在播放'}>播放电影</AlertButton>
        <AlertButton message={'正在上传'}>上传图片</AlertButton>
      </div>
      <div>
        <PlayButton name={'阿甘正传'} />
        <UploadButton filename={'excel'} />
      </div>
      <Toolbar onPlayMovie={() => alert('正在播放！')} onUploadImage={() => alert('正在上传！')} />
      <SighUp />
    </div>
  )
}
